<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../lib/layui/css/layui.css">
  <link rel="stylesheet" href="../styles/css/index.css">
  <script src="../lib/layui/layui.js"></script>
  <script src="../lib/JQuery.js"></script>

  <style>
    html,
    body {
      height: calc(100% - 2px);
      width: 100%;
    }



    .right-top {
      width: 100%;
    }

    .liBox {
      height: 180px;
      width: calc(25% - 40px);
      padding: 20px;
      float: left;
    }

    .shipinBox video {
      width: 100%;
      height: 100%;
    }
    .listvideo{
            overflow: hidden;

    }
    .videoouter{
      box-shadow: 1px 1px 8px #CCCCCC;
      padding: 20px;
      margin-top: 20px;
    }
    .listvideo li {
      width: 170px;
      height: 255px;
      padding: 10px;
      background: #ccc;
      margin: 5px;
      float: left;
    }

    .listvideo li p {
      padding: 2px;
      color: #fff;
    }

    .listvideo li video {
      width: 100%;
      height: 200px;
    }
    .listvideo,#page{
      width: 1000px;
      margin: 0 auto;
    }
    #page{
      padding: 0 25px;
    }



    .rightBox-top {
      border-radius: 10px;
      padding: 20px;
      margin: 10px;
    }

    .topcon {
      height: 50px;
      border-bottom: 1px solid #ccc;
      line-height: 50px;
      text-indent: 20px;
      font-size: 16px;
      letter-spacing: 3px;
      font-weight: 500;
      border-left: 4px solid #009688;
    }

    .form_element_c {
      padding-top: 20px;
    }

    .bottomBox {
      width: calc(33% - 12px);
      height: 280px;
      border: 1px solid #009688;
      float: left;
      border-radius: 5px;
      margin: 0 5px 10px;
    }

    .litbox {
      height: 30px;
      color: #fff;
      background: #009688;
      line-height: 30px;
      padding-left: 20px;
    }

    .boxEcharts {
      width: 250px;
      height: 250px;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <div class="headTitle">
    地块监测
  </div>
  <div class="sideListout">
    <div class="leftBox">
      <div id="test1"></div>
      <div class="hidden">
        <div class="sanjiao" state="false"></div>
      </div>
    </div>
    <div class="rightBox">
      <div class="right-top" id="chartmain">
        <div class="layui-tab layui-tab-card" lay-filter="tab1">
          <ul class="layui-tab-title">
            <li class="layui-this">整体监测</li>
            <li>温度</li>
            <li>湿度</li>
            <li>积温</li>
            <li>视频</li>
            <li>叶龄</li>
          </ul>
          <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
              <div class="bottomcon" style="overflow: hidden;margin-top: 20px;">
                <ul style="width: 100%;">
                  <li class="bottomBox">
                    <div class="litbox">光照度</div>
                    <div id="boxEcharts1" class="boxEcharts"></div>
                  </li>
                  <li class="bottomBox">
                    <div class="litbox">空气湿度</div>
                    <div id="boxEcharts2" class="boxEcharts"></div>
                  </li>
                  <li class="bottomBox">
                    <div class="litbox">空气温度</div>
                    <div id="boxEcharts3" class="boxEcharts"></div>
                  </li>
                  <li class="bottomBox">
                    <div class="litbox">土壤湿度</div>
                    <div id="boxEcharts4" class="boxEcharts"></div>
                  </li>
                  <li class="bottomBox">
                    <div class="litbox">土壤温度</div>
                    <div id="boxEcharts5" class="boxEcharts"></div>
                  </li>
                  <li class="bottomBox">
                    <div class="litbox">二氧化碳浓度</div>
                    <div id="boxEcharts6" class="boxEcharts"></div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="layui-tab-item">
              <form action="" class="layui-form">
                <div class="layui-row">
                  <div class="layui-col-md5">
                    <div class="layui-form-item">
                      <label class="layui-form-label">时间起始</label>
                      <div class="layui-input-inline box">
                        <input name="time" type="text" class="layui-input" id="test3" required="true"
                          lay-verify="required">
                      </div>
                    </div>
                  </div>
                  <div class="layui-col-md5">
                    <div class="layui-form-item">
                      <label class="layui-form-label">时间截止</label>
                      <div class="layui-input-inline box">
                        <input name="time1" type="text" class="layui-input" id="test2" required="true"
                          lay-verify="required">
                      </div>
                    </div>
                  </div>
                  <div class="layui-col-md2" style="text-align: center;">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
                  </div>
                </div>
              </form>
              <div class='tableHeader'>温度</div>
              <div class="charts" style="width:100%;">
                <div id="chartmain2" style="height: 342px;width: 100%;"></div>
              </div>
              <div class="tableHeader">温度数据</div>
              <div id="demoTable" style="width: 100%;" lay-filter="test"></div>
            </div>
            <div class="layui-tab-item">
              <form action="" class="layui-form">
                <div class="layui-row">
                  <div class="layui-col-md5">
                    <div class="layui-form-item">
                      <label class="layui-form-label">时间起始</label>
                      <div class="layui-input-inline box">
                        <input name="time" type="text" class="layui-input"  required="true"
                               lay-verify="required">
                      </div>
                    </div>
                  </div>
                  <div class="layui-col-md5">
                    <div class="layui-form-item">
                      <label class="layui-form-label">时间截止</label>
                      <div class="layui-input-inline box">
                        <input name="time1" type="text" class="layui-input" required="true"
                               lay-verify="required">
                      </div>
                    </div>
                  </div>
                  <div class="layui-col-md2" style="text-align: center;">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
                  </div>
                </div>
              </form>
              <div class='tableHeader'>湿度</div>
              <div class="charts" style="width:100%;">
                <div id="chartmain6" style="height: 342px;width: 100%;"></div>
              </div>
              <div class="tableHeader">湿度数据</div>
              <div id="demoTable6" style="width: 100%;" lay-filter="test"></div>
            </div>
            <div class="layui-tab-item">
              <form action="" class="layui-form">
                <div class="layui-row">
                  <div class="layui-col-md5">
                    <div class="layui-form-item">
                      <label class="layui-form-label">年份</label>
                      <div class="layui-input-inline box">
                        <select name="city" lay-verify="required">
                          <option value=""></option>
                          <option value="0">北京</option>
                          <option value="1">上海</option>
                        </select>
                      </div>
                    </div>
                  </div>
                  <div class="layui-col-md2" style="text-align: center;">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
                  </div>
                </div>
              </form>
              <div class='tableHeader'>积温</div>
              <div class="charts" style="width:100%;">
                <div id="chartmain3" style="height: 342px;width: 100%;"></div>
              </div>
              <div  class="tableHeader">积温数据</div>
              <div id="demoTable2" style="width: 100%;" lay-filter="test"></div>
            </div>
            <div class="layui-tab-item">
              <form action="" class="layui-form">
                <div class="layui-row">
                  <div class="layui-col-md5">
                    <div class="layui-form-item">
                      <label class="layui-form-label">时间起始</label>
                      <div class="layui-input-inline box">
                        <input name="time" type="text" class="layui-input" id="test4" required="true"
                          lay-verify="required">
                      </div>
                    </div>
                  </div>
                  <div class="layui-col-md5">
                    <div class="layui-form-item">
                      <label class="layui-form-label">时间截止</label>
                      <div class="layui-input-inline box">
                        <input name="time1" type="text" class="layui-input" id="test5" required="true"
                          lay-verify="required">
                      </div>
                    </div>
                  </div>
                  <div class="layui-col-md2" style="text-align: center;">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
                  </div>
                </div>
              </form>
              <div  class="tableHeader">视频数据</div>
              <div class="bottom-box" style="width: 100%;">
                <div class="videoouter">
                  <ul class="listvideo">
                    <li class="liBox">
                      <div class="shipinBox">
                        <video video src="" controls="controls"></video>
                        <p>陕陕西农民职业培训</p><p>[preset--003]</p><p>1092-3-21 12:02:34</p>
                      </div>
                    </li>
                    <li class="liBox">
                      <div class="shipinBox">
                        <video video src="" controls="controls"></video>
                        <p>陕陕西农民职业培训</p><p>[preset--003]</p><p>1092-3-21 12:02:34</p>
                      </div>
                    </li>
                    <li class="liBox">
                      <div class="shipinBox">
                        <video video src="" controls="controls"></video>
                        <p>陕陕西农民职业培训</p><p>[preset--003]</p><p>1092-3-21 12:02:34</p>
                      </div>
                    </li>
                    <li class="liBox">
                      <div class="shipinBox">
                        <video video src="" controls="controls"></video>
                        <p>陕陕西农民职业培训</p><p>[preset--003]</p><p>1092-3-21 12:02:34</p>
                      </div>
                    </li>
                    <li class="liBox">
                      <div class="shipinBox">
                        <video video src="" controls="controls"></video>
                        <p>陕陕西农民职业培训</p><p>[preset--003]</p><p>1092-3-21 12:02:34</p>
                      </div>
                    </li>
                    <li class="liBox">
                      <div class="shipinBox">
                        <video video src="" controls="controls"></video>
                        <p>陕陕西农民职业培训</p><p>[preset--003]</p><p>1092-3-21 12:02:34</p>
                      </div>
                    </li>
                    <li class="liBox">
                      <div class="shipinBox">
                        <video video src="" controls="controls"></video>
                        <p>陕陕西农民职业培训</p><p>[preset--003]</p><p>1092-3-21 12:02:34</p>
                      </div>
                    </li>
                    <li class="liBox">
                      <div class="shipinBox">
                        <video video src="" controls="controls"></video>
                        <p>陕陕西农民职业培训</p><p>[preset--003]</p><p>1092-3-21 12:02:34</p>
                      </div>
                    </li>
                  </ul>
                </div>
                <div id="page" ></div>
              </div>
            </div>
            <div class="layui-tab-item">
              <form action="" class="layui-form">
                <div class="layui-row">
                  <div class="layui-col-md5">
                    <div class="layui-form-item">
                      <label class="layui-form-label">时间起始</label>
                      <div class="layui-input-inline box">
                        <input name="time" type="text" class="layui-input" id="test6" required="true"
                          lay-verify="required">
                      </div>
                    </div>
                  </div>
                  <div class="layui-col-md5">
                    <div class="layui-form-item">
                      <label class="layui-form-label">时间截止</label>
                      <div class="layui-input-inline box">
                        <input name="time1" type="text" class="layui-input" id="test7" required="true"
                          lay-verify="required">
                      </div>
                    </div>
                  </div>
                  <div class="layui-col-md2" style="text-align: center;">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
                  </div>
                </div>
              </form>
              <div class='tableHeader'>叶龄</div>
              <div class="charts" style="width:100%;">
                <div id="chartmain4" style="height: 342px;width: 100%;"></div>
              </div>
              <div  class="tableHeader">叶龄数据</div>
              <div id="demoTable3" style="width: 100%;" lay-filter="test"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
<script src="../lib/echarts.js"></script>
<script>

  layui.use(['table', 'jquery', 'form'], function () {
    var table = layui.table;
    var $ = jQuery = layui.$;
    var form = layui.form;
    //监听提交
    form.on('submit(formDemo)', function (data) {
      console.log(data)
      alert(JSON.stringify(data.field));
      return false;
    });
    //第一个实例
    table.render({
      elem: '#demoTable',
      //					height: 315
      //  ,url: '/demo/table/user/' //数据接口
      //						,
      page: true //开启分页
        ,
      cols: [
        [ //表头
          {
            field: 'dkmc',
            title: '序号',
            align: 'center',
            width: '20%'
          }, {
            field: 'cjsj',
            title: '地块名称',
            align: 'center',
            width: '20%',
          }, {
            field: 'sbid',
            title: '空气温度',
            align: 'center',
            width: '20%'
          },{
            field: 'gz',
            title: '土壤温度',
            width: '20%',
            align: 'center',
          }, {
            field: 'trsf',
            title: '时间',
            width: '20%',
            align: 'center',
          }
        ]
      ],
      data: [
          { // 表格数据
        "id": "<div><input type='checkbox'></div>",
        "dkmc": "地块",
        "cjsj": "男",
        "sbid": "浙江杭州",
        "sblx": "人生恰似一场修行",
        "gz": "116",
        "kqsd": "116",
        "trsf": "地块",
        "trwd": "男",
        "dcdl": "浙江杭州",
        "dy": "人生恰似一场修行",
        "yl": "116",
      }, {
          "id": "<div><input type='checkbox'></div>",
          "dkmc": "地块",
          "cjsj": "男",
          "sbid": "浙江杭州",
          "sblx": "人生恰似一场修行",
          "gz": "116",
          "kqsd": "116",
          "trsf": "地块",
          "trwd": "男",
          "dcdl": "浙江杭州",
          "dy": "人生恰似一场修行",
          "yl": "116",
      }, {
          "id": "<div><input type='checkbox'></div>",
          "dkmc": "地块",
          "cjsj": "男",
          "sbid": "浙江杭州",
          "sblx": "人生恰似一场修行",
          "gz": "116",
          "kqsd": "116",
          "trsf": "地块",
          "trwd": "男",
          "dcdl": "浙江杭州",
          "dy": "人生恰似一场修行",
          "yl": "116",
      }, {
          "id": "<div><input type='checkbox'></div>",
          "dkmc": "地块",
          "cjsj": "男",
          "sbid": "浙江杭州",
          "sblx": "人生恰似一场修行",
          "gz": "116",
          "kqsd": "116",
          "trsf": "地块",
          "trwd": "男",
          "dcdl": "浙江杭州",
          "dy": "人生恰似一场修行",
          "yl": "116",
      }, {
          "id": "<div><input type='checkbox'></div>",
          "dkmc": "地块",
          "cjsj": "男",
          "sbid": "浙江杭州",
          "sblx": "人生恰似一场修行",
          "gz": "116",
          "kqsd": "116",
          "trsf": "地块",
          "trwd": "男",
          "dcdl": "浙江杭州",
          "dy": "人生恰似一场修行",
          "yl": "116",
      }, {
          "id": "<div><input type='checkbox'></div>",
          "dkmc": "地块",
          "cjsj": "男",
          "sbid": "浙江杭州",
          "sblx": "人生恰似一场修行",
          "gz": "116",
          "kqsd": "116",
          "trsf": "地块",
          "trwd": "男",
          "dcdl": "浙江杭州",
          "dy": "人生恰似一场修行",
          "yl": "116",
      }, {
          "id": "<div><input type='checkbox'></div>",
          "dkmc": "地块",
          "cjsj": "男",
          "sbid": "浙江杭州",
          "sblx": "人生恰似一场修行",
          "gz": "116",
          "kqsd": "116",
          "trsf": "地块",
          "trwd": "男",
          "dcdl": "浙江杭州",
          "dy": "人生恰似一场修行",
          "yl": "116",
      }, {
          "id": "<div><input type='checkbox'></div>",
          "dkmc": "地块",
          "cjsj": "男",
          "sbid": "浙江杭州",
          "sblx": "人生恰似一场修行",
          "gz": "116",
          "kqsd": "116",
          "trsf": "地块",
          "trwd": "男",
          "dcdl": "浙江杭州",
          "dy": "人生恰似一场修行",
          "yl": "116",
      }, {
          "id": "<div><input type='checkbox'></div>",
          "dkmc": "地块",
          "cjsj": "男",
          "sbid": "浙江杭州",
          "sblx": "人生恰似一场修行",
          "gz": "116",
          "kqsd": "116",
          "trsf": "地块",
          "trwd": "男",
          "dcdl": "浙江杭州",
          "dy": "人生恰似一场修行",
          "yl": "116",
      }, {
          "id": "<div><input type='checkbox'></div>",
          "dkmc": "地块",
          "cjsj": "男",
          "sbid": "浙江杭州",
          "sblx": "人生恰似一场修行",
          "gz": "116",
          "kqsd": "116",
          "trsf": "地块",
          "trwd": "男",
          "dcdl": "浙江杭州",
          "dy": "人生恰似一场修行",
          "yl": "116",
      }, {
          "id": "<div><input type='checkbox'></div>",
          "dkmc": "地块",
          "cjsj": "男",
          "sbid": "浙江杭州",
          "sblx": "人生恰似一场修行",
          "gz": "116",
          "kqsd": "116",
          "trsf": "地块",
          "trwd": "男",
          "dcdl": "浙江杭州",
          "dy": "人生恰似一场修行",
          "yl": "116",
      }, {
          "id": "<div><input type='checkbox'></div>",
          "dkmc": "地块",
          "cjsj": "男",
          "sbid": "浙江杭州",
          "sblx": "人生恰似一场修行",
          "gz": "116",
          "kqsd": "116",
          "trsf": "地块",
          "trwd": "男",
          "dcdl": "浙江杭州",
          "dy": "人生恰似一场修行",
          "yl": "116",
      }, {
          "id": "<div><input type='checkbox'></div>",
          "dkmc": "地块",
          "cjsj": "男",
          "sbid": "浙江杭州",
          "sblx": "人生恰似一场修行",
          "gz": "116",
          "kqsd": "116",
          "trsf": "地块",
          "trwd": "男",
          "dcdl": "浙江杭州",
          "dy": "人生恰似一场修行",
          "yl": "116",
      }, {
          "id": "<div><input type='checkbox'></div>",
          "dkmc": "地块",
          "cjsj": "男",
          "sbid": "浙江杭州",
          "sblx": "人生恰似一场修行",
          "gz": "116",
          "kqsd": "116",
          "trsf": "地块",
          "trwd": "男",
          "dcdl": "浙江杭州",
          "dy": "人生恰似一场修行",
          "yl": "116",
      }, {
          "id": "<div><input type='checkbox'></div>",
          "dkmc": "地块",
          "cjsj": "男",
          "sbid": "浙江杭州",
          "sblx": "人生恰似一场修行",
          "gz": "116",
          "kqsd": "116",
          "trsf": "地块",
          "trwd": "男",
          "dcdl": "浙江杭州",
          "dy": "人生恰似一场修行",
          "yl": "116",
      }, {
          "id": "<div><input type='checkbox'></div>",
          "dkmc": "地块",
          "cjsj": "男",
          "sbid": "浙江杭州",
          "sblx": "人生恰似一场修行",
          "gz": "116",
          "kqsd": "116",
          "trsf": "地块",
          "trwd": "男",
          "dcdl": "浙江杭州",
          "dy": "人生恰似一场修行",
          "yl": "116",
      }, {
          "id": "<div><input type='checkbox'></div>",
          "dkmc": "地块",
          "cjsj": "男",
          "sbid": "浙江杭州",
          "sblx": "人生恰似一场修行",
          "gz": "116",
          "kqsd": "116",
          "trsf": "地块",
          "trwd": "男",
          "dcdl": "浙江杭州",
          "dy": "人生恰似一场修行",
          "yl": "116",
      }, {
          "id": "<div><input type='checkbox'></div>",
          "dkmc": "地块",
          "cjsj": "男",
          "sbid": "浙江杭州",
          "sblx": "人生恰似一场修行",
          "gz": "116",
          "kqsd": "116",
          "trsf": "地块",
          "trwd": "男",
          "dcdl": "浙江杭州",
          "dy": "人生恰似一场修行",
          "yl": "116",
      }]
    });
    table.render({
          elem: '#demoTable6',
          //					height: 315
          //  ,url: '/demo/table/user/' //数据接口
          //						,
          page: true //开启分页
          ,
          cols: [
              [ //表头
                  {
                      field: 'dkmc',
                      title: '序号',
                      align: 'center',
                      width: '20%'
                  }, {
                  field: 'cjsj',
                  title: '地块名称',
                  align: 'center',
                  width: '20%',
              }, {
                  field: 'sbid',
                  title: '空气湿度',
                  align: 'center',
                  width: '20%'
              },{
                  field: 'gz',
                  title: '土壤湿度',
                  width: '20%',
                  align: 'center',
              }, {
                  field: 'trsf',
                  title: '时间',
                  width: '20%',
                  align: 'center',
              }
              ]
          ],
          data: [
              { // 表格数据
                  "id": "<div><input type='checkbox'></div>",
                  "dkmc": "地块",
                  "cjsj": "男",
                  "sbid": "浙江杭州",
                  "sblx": "人生恰似一场修行",
                  "gz": "116",
                  "kqsd": "116",
                  "trsf": "地块",
                  "trwd": "男",
                  "dcdl": "浙江杭州",
                  "dy": "人生恰似一场修行",
                  "yl": "116",
              }, {
                  "id": "<div><input type='checkbox'></div>",
                  "dkmc": "地块",
                  "cjsj": "男",
                  "sbid": "浙江杭州",
                  "sblx": "人生恰似一场修行",
                  "gz": "116",
                  "kqsd": "116",
                  "trsf": "地块",
                  "trwd": "男",
                  "dcdl": "浙江杭州",
                  "dy": "人生恰似一场修行",
                  "yl": "116",
              }, {
                  "id": "<div><input type='checkbox'></div>",
                  "dkmc": "地块",
                  "cjsj": "男",
                  "sbid": "浙江杭州",
                  "sblx": "人生恰似一场修行",
                  "gz": "116",
                  "kqsd": "116",
                  "trsf": "地块",
                  "trwd": "男",
                  "dcdl": "浙江杭州",
                  "dy": "人生恰似一场修行",
                  "yl": "116",
              }, {
                  "id": "<div><input type='checkbox'></div>",
                  "dkmc": "地块",
                  "cjsj": "男",
                  "sbid": "浙江杭州",
                  "sblx": "人生恰似一场修行",
                  "gz": "116",
                  "kqsd": "116",
                  "trsf": "地块",
                  "trwd": "男",
                  "dcdl": "浙江杭州",
                  "dy": "人生恰似一场修行",
                  "yl": "116",
              }, {
                  "id": "<div><input type='checkbox'></div>",
                  "dkmc": "地块",
                  "cjsj": "男",
                  "sbid": "浙江杭州",
                  "sblx": "人生恰似一场修行",
                  "gz": "116",
                  "kqsd": "116",
                  "trsf": "地块",
                  "trwd": "男",
                  "dcdl": "浙江杭州",
                  "dy": "人生恰似一场修行",
                  "yl": "116",
              }, {
                  "id": "<div><input type='checkbox'></div>",
                  "dkmc": "地块",
                  "cjsj": "男",
                  "sbid": "浙江杭州",
                  "sblx": "人生恰似一场修行",
                  "gz": "116",
                  "kqsd": "116",
                  "trsf": "地块",
                  "trwd": "男",
                  "dcdl": "浙江杭州",
                  "dy": "人生恰似一场修行",
                  "yl": "116",
              }, {
                  "id": "<div><input type='checkbox'></div>",
                  "dkmc": "地块",
                  "cjsj": "男",
                  "sbid": "浙江杭州",
                  "sblx": "人生恰似一场修行",
                  "gz": "116",
                  "kqsd": "116",
                  "trsf": "地块",
                  "trwd": "男",
                  "dcdl": "浙江杭州",
                  "dy": "人生恰似一场修行",
                  "yl": "116",
              }, {
                  "id": "<div><input type='checkbox'></div>",
                  "dkmc": "地块",
                  "cjsj": "男",
                  "sbid": "浙江杭州",
                  "sblx": "人生恰似一场修行",
                  "gz": "116",
                  "kqsd": "116",
                  "trsf": "地块",
                  "trwd": "男",
                  "dcdl": "浙江杭州",
                  "dy": "人生恰似一场修行",
                  "yl": "116",
              }, {
                  "id": "<div><input type='checkbox'></div>",
                  "dkmc": "地块",
                  "cjsj": "男",
                  "sbid": "浙江杭州",
                  "sblx": "人生恰似一场修行",
                  "gz": "116",
                  "kqsd": "116",
                  "trsf": "地块",
                  "trwd": "男",
                  "dcdl": "浙江杭州",
                  "dy": "人生恰似一场修行",
                  "yl": "116",
              }, {
                  "id": "<div><input type='checkbox'></div>",
                  "dkmc": "地块",
                  "cjsj": "男",
                  "sbid": "浙江杭州",
                  "sblx": "人生恰似一场修行",
                  "gz": "116",
                  "kqsd": "116",
                  "trsf": "地块",
                  "trwd": "男",
                  "dcdl": "浙江杭州",
                  "dy": "人生恰似一场修行",
                  "yl": "116",
              }, {
                  "id": "<div><input type='checkbox'></div>",
                  "dkmc": "地块",
                  "cjsj": "男",
                  "sbid": "浙江杭州",
                  "sblx": "人生恰似一场修行",
                  "gz": "116",
                  "kqsd": "116",
                  "trsf": "地块",
                  "trwd": "男",
                  "dcdl": "浙江杭州",
                  "dy": "人生恰似一场修行",
                  "yl": "116",
              }, {
                  "id": "<div><input type='checkbox'></div>",
                  "dkmc": "地块",
                  "cjsj": "男",
                  "sbid": "浙江杭州",
                  "sblx": "人生恰似一场修行",
                  "gz": "116",
                  "kqsd": "116",
                  "trsf": "地块",
                  "trwd": "男",
                  "dcdl": "浙江杭州",
                  "dy": "人生恰似一场修行",
                  "yl": "116",
              }, {
                  "id": "<div><input type='checkbox'></div>",
                  "dkmc": "地块",
                  "cjsj": "男",
                  "sbid": "浙江杭州",
                  "sblx": "人生恰似一场修行",
                  "gz": "116",
                  "kqsd": "116",
                  "trsf": "地块",
                  "trwd": "男",
                  "dcdl": "浙江杭州",
                  "dy": "人生恰似一场修行",
                  "yl": "116",
              }, {
                  "id": "<div><input type='checkbox'></div>",
                  "dkmc": "地块",
                  "cjsj": "男",
                  "sbid": "浙江杭州",
                  "sblx": "人生恰似一场修行",
                  "gz": "116",
                  "kqsd": "116",
                  "trsf": "地块",
                  "trwd": "男",
                  "dcdl": "浙江杭州",
                  "dy": "人生恰似一场修行",
                  "yl": "116",
              }, {
                  "id": "<div><input type='checkbox'></div>",
                  "dkmc": "地块",
                  "cjsj": "男",
                  "sbid": "浙江杭州",
                  "sblx": "人生恰似一场修行",
                  "gz": "116",
                  "kqsd": "116",
                  "trsf": "地块",
                  "trwd": "男",
                  "dcdl": "浙江杭州",
                  "dy": "人生恰似一场修行",
                  "yl": "116",
              }, {
                  "id": "<div><input type='checkbox'></div>",
                  "dkmc": "地块",
                  "cjsj": "男",
                  "sbid": "浙江杭州",
                  "sblx": "人生恰似一场修行",
                  "gz": "116",
                  "kqsd": "116",
                  "trsf": "地块",
                  "trwd": "男",
                  "dcdl": "浙江杭州",
                  "dy": "人生恰似一场修行",
                  "yl": "116",
              }, {
                  "id": "<div><input type='checkbox'></div>",
                  "dkmc": "地块",
                  "cjsj": "男",
                  "sbid": "浙江杭州",
                  "sblx": "人生恰似一场修行",
                  "gz": "116",
                  "kqsd": "116",
                  "trsf": "地块",
                  "trwd": "男",
                  "dcdl": "浙江杭州",
                  "dy": "人生恰似一场修行",
                  "yl": "116",
              }, {
                  "id": "<div><input type='checkbox'></div>",
                  "dkmc": "地块",
                  "cjsj": "男",
                  "sbid": "浙江杭州",
                  "sblx": "人生恰似一场修行",
                  "gz": "116",
                  "kqsd": "116",
                  "trsf": "地块",
                  "trwd": "男",
                  "dcdl": "浙江杭州",
                  "dy": "人生恰似一场修行",
                  "yl": "116",
              }]
      });
    table.render({
      elem: '#demoTable2',
      //					height: 315
      //  ,url: '/demo/table/user/' //数据接口
      //						,
      page: true //开启分页
        ,
      cols: [
        [ //表头
          {
            field: 'dkmc',
            title: '序号',
            align: 'center',
            width: '33.33%'
          }, {
            field: 'cjsj',
            title: '年份',
            align: 'center',
            width: '33.33%'
          }, {
            field: 'sbid',
            title: '积温',
            align: 'center',
            width: '33.33%'
          }
        ]
      ],
      data: [{ // 表格数据
        "id": "<div><input type='checkbox'></div>",
        "dkmc": "地块",
        "cjsj": "男",
        "sbid": "浙江杭州",
        "sblx": "人生恰似一场修行",
        "gz": "116",
        "kqsd": "116",
        "trsf": "地块",
        "trwd": "男",
        "dcdl": "浙江杭州",
        "dy": "人生恰似一场修行",
        "yl": "116",
      }, {
        "id": "<div><input type='checkbox'></div>",
        "dkmc": "地块",
        "cjsj": "男",
        "sbid": "浙江杭州",
        "sblx": "人生恰似一场修行",
        "gz": "116",
        "kqsd": "116",
        "trsf": "地块",
        "trwd": "男",
        "dcdl": "浙江杭州",
        "dy": "人生恰似一场修行",
        "yl": "116",
      }, {
          "id": "<div><input type='checkbox'></div>",
          "dkmc": "地块",
          "cjsj": "男",
          "sbid": "浙江杭州",
          "sblx": "人生恰似一场修行",
          "gz": "116",
          "kqsd": "116",
          "trsf": "地块",
          "trwd": "男",
          "dcdl": "浙江杭州",
          "dy": "人生恰似一场修行",
          "yl": "116",
      }, {
          "id": "<div><input type='checkbox'></div>",
          "dkmc": "地块",
          "cjsj": "男",
          "sbid": "浙江杭州",
          "sblx": "人生恰似一场修行",
          "gz": "116",
          "kqsd": "116",
          "trsf": "地块",
          "trwd": "男",
          "dcdl": "浙江杭州",
          "dy": "人生恰似一场修行",
          "yl": "116",
      }, {
          "id": "<div><input type='checkbox'></div>",
          "dkmc": "地块",
          "cjsj": "男",
          "sbid": "浙江杭州",
          "sblx": "人生恰似一场修行",
          "gz": "116",
          "kqsd": "116",
          "trsf": "地块",
          "trwd": "男",
          "dcdl": "浙江杭州",
          "dy": "人生恰似一场修行",
          "yl": "116",
      }, {
          "id": "<div><input type='checkbox'></div>",
          "dkmc": "地块",
          "cjsj": "男",
          "sbid": "浙江杭州",
          "sblx": "人生恰似一场修行",
          "gz": "116",
          "kqsd": "116",
          "trsf": "地块",
          "trwd": "男",
          "dcdl": "浙江杭州",
          "dy": "人生恰似一场修行",
          "yl": "116",
      }, {
          "id": "<div><input type='checkbox'></div>",
          "dkmc": "地块",
          "cjsj": "男",
          "sbid": "浙江杭州",
          "sblx": "人生恰似一场修行",
          "gz": "116",
          "kqsd": "116",
          "trsf": "地块",
          "trwd": "男",
          "dcdl": "浙江杭州",
          "dy": "人生恰似一场修行",
          "yl": "116",
      }, {
          "id": "<div><input type='checkbox'></div>",
          "dkmc": "地块",
          "cjsj": "男",
          "sbid": "浙江杭州",
          "sblx": "人生恰似一场修行",
          "gz": "116",
          "kqsd": "116",
          "trsf": "地块",
          "trwd": "男",
          "dcdl": "浙江杭州",
          "dy": "人生恰似一场修行",
          "yl": "116",
      }]
    });
    table.render({
      elem: '#demoTable3',
      //					height: 315
      //  ,url: '/demo/table/user/' //数据接口
      //						,
      page: true //开启分页
        ,
      cols: [
        [ //表头
          {
            field: 'dkmc',
            title: '序号',
            align: 'center',
            width: '25%'
          }, {
            field: 'cjsj',
            title: '地块名称',
            align: 'center',
            width: '25%'
          }, {
            field: 'sbid',
            title: '叶龄',
            align: 'center',
            width: '25%'
          }, {
            field: 'sbid',
            title: '时间',
            align: 'center',
            width: '25%'
          }
        ]
      ],
      data: [{ // 表格数据
        "id": "<div><input type='checkbox'></div>",
        "dkmc": "地块",
        "cjsj": "男",
        "sbid": "浙江杭州",
        "sblx": "人生恰似一场修行",
        "gz": "116",
        "kqsd": "116",
        "trsf": "地块",
        "trwd": "男",
        "dcdl": "浙江杭州",
        "dy": "人生恰似一场修行",
        "yl": "116",
      }, {
        "id": "<div><input type='checkbox'></div>",
        "dkmc": "地块",
        "cjsj": "男",
        "sbid": "浙江杭州",
        "sblx": "人生恰似一场修行",
        "gz": "116",
        "kqsd": "116",
        "trsf": "地块",
        "trwd": "男",
        "dcdl": "浙江杭州",
        "dy": "人生恰似一场修行",
        "yl": "116",
      }, {
          "id": "<div><input type='checkbox'></div>",
          "dkmc": "地块",
          "cjsj": "男",
          "sbid": "浙江杭州",
          "sblx": "人生恰似一场修行",
          "gz": "116",
          "kqsd": "116",
          "trsf": "地块",
          "trwd": "男",
          "dcdl": "浙江杭州",
          "dy": "人生恰似一场修行",
          "yl": "116",
      }, {
          "id": "<div><input type='checkbox'></div>",
          "dkmc": "地块",
          "cjsj": "男",
          "sbid": "浙江杭州",
          "sblx": "人生恰似一场修行",
          "gz": "116",
          "kqsd": "116",
          "trsf": "地块",
          "trwd": "男",
          "dcdl": "浙江杭州",
          "dy": "人生恰似一场修行",
          "yl": "116",
      }, {
          "id": "<div><input type='checkbox'></div>",
          "dkmc": "地块",
          "cjsj": "男",
          "sbid": "浙江杭州",
          "sblx": "人生恰似一场修行",
          "gz": "116",
          "kqsd": "116",
          "trsf": "地块",
          "trwd": "男",
          "dcdl": "浙江杭州",
          "dy": "人生恰似一场修行",
          "yl": "116",
      }, {
          "id": "<div><input type='checkbox'></div>",
          "dkmc": "地块",
          "cjsj": "男",
          "sbid": "浙江杭州",
          "sblx": "人生恰似一场修行",
          "gz": "116",
          "kqsd": "116",
          "trsf": "地块",
          "trwd": "男",
          "dcdl": "浙江杭州",
          "dy": "人生恰似一场修行",
          "yl": "116",
      }, {
          "id": "<div><input type='checkbox'></div>",
          "dkmc": "地块",
          "cjsj": "男",
          "sbid": "浙江杭州",
          "sblx": "人生恰似一场修行",
          "gz": "116",
          "kqsd": "116",
          "trsf": "地块",
          "trwd": "男",
          "dcdl": "浙江杭州",
          "dy": "人生恰似一场修行",
          "yl": "116",
      }, {
          "id": "<div><input type='checkbox'></div>",
          "dkmc": "地块",
          "cjsj": "男",
          "sbid": "浙江杭州",
          "sblx": "人生恰似一场修行",
          "gz": "116",
          "kqsd": "116",
          "trsf": "地块",
          "trwd": "男",
          "dcdl": "浙江杭州",
          "dy": "人生恰似一场修行",
          "yl": "116",
      }]
    });
  });
  layui.use(['tree', 'util'], function () {
    var tree = layui.tree,
      layer = layui.layer,
      util = layui.util,
      nodes = [{ // 树分支数据
        title: '江西',
        id: 1,
        children: [{
          title: '南昌',
          id: 1000,
          children: [{
            title: '青山湖区',
            id: 10001
          }, {
            title: '高新区',
            id: 10002
          }]
        }, {
          title: '九江',
          id: 1001
        }, {
          title: '赣州',
          id: 1002
        }]
      }, {
        title: '广西',
        id: 2,
        children: [{
          title: '南宁',
          id: 2000
        }, {
          title: '桂林',
          id: 2001
        }]
      }, {
        title: '陕西',
        id: 3,
        children: [{
          title: '西安',
          id: 3000
        }, {
          title: '延安',
          id: 3001
        }]
      }]
    tree.render({
      elem: '#test1',
      data: nodes,
      showCheckbox: true,
      oncheck: function (obj) { //勾选时触发获取勾选数据
        alert(obj)
        alert(obj)
      },
      showLine: false //是否开启连接线
    });

  });
  layui.use('laydate', function () {
    var laydate = layui.laydate;

    //执行一个laydate实例
    laydate.render({
      elem: '#test3' //指定元素
    });
    laydate.render({
      elem: '#test2' //指定元素
    });
    laydate.render({
      elem: '#test4' //指定元素
    });
    laydate.render({
      elem: '#test5' //指定元素
    });
    laydate.render({
      elem: '#test6' //指定元素
    });
    laydate.render({
      elem: '#test7' //指定元素
    });
  });


  //分页
  layui.use('laypage', function () {
      var laypage = layui.laypage;

      //执行一个laypage实例
      laypage.render({
          elem: 'page', //注意，这里的 test1 是 ID，不用加 # 号
          count: 50, //数据总数，从服务端得到
          jump: function (obj, first) {
              //obj包含了当前分页的所有参数，比如：
              console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
              console.log(obj.limit); //得到每页显示的条数
          }
      });
  });


  //echarts
  var option  = {
      tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'cross',
              label: {
                  backgroundColor: '#6a7985'
              }
          }
      },
      legend: {
          data: ['地块1', '地块2'],
          x: 'right'
      },
      toolbox: {
          show: false,
          feature: {
              saveAsImage: {}
          }
      },
      grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
      },
      xAxis: [{
          type: 'category',
          boundaryGap: false,
          data: ['地块1', '地块2', '地块3', '地块4', '地块5', '地块6', '地块7']
      }],
      yAxis: [{
          type: "value",
          scale: !0,
          splitArea: {//背景条纹
              show: true,
              areaStyle: {
                  color: [
                      'rgba(255,255,255,0)',
                      'rgba(242,243,248,1)'
                  ]
              }
          }
      }],
      series: [
          {
              name: '地块1',
              type: 'line',
              stack: '总量',
              smooth: true,
              showSymbol: !1,
              data: [120, 132, 101, 134, 90, 230, 210,]
          },
          {
              name: '地块2',
              type: 'line',
              stack: '总量',
              smooth: true,
              showSymbol: !1,
              data: [220, 182, 191, 234, 290, 330, 310]
          }
      ]
  };
  var myChart = echarts.init(document.getElementById('chartmain2'));
  var option6  = {
      tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'cross',
              label: {
                  backgroundColor: '#6a7985'
              }
          }
      },
      legend: {
          data: ['空气温度', '土壤温度'],
          x: 'right'
      },
      toolbox: {
          show: false,
          feature: {
              saveAsImage: {}
          }
      },
      grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
      },
      xAxis: [{
          type: 'category',
          boundaryGap: false,
          data: ['地块1', '地块2', '地块3', '地块4', '地块5', '地块6', '地块7']
      }],
      yAxis: [{
          type: "value",
          scale: !0,
          splitArea: {//背景条纹
              show: true,
              areaStyle: {
                  color: [
                      'rgba(255,255,255,0)',
                      'rgba(242,243,248,1)'
                  ]
              }
          }
      }],
      series: [
          {
              name: '空气温度',
              type: 'line',
              stack: '总量',
              smooth: true,
              showSymbol: !1,
              data: [120, 132, 101, 134, 90, 230, 210,]
          },
          {
              name: '土壤温度',
              type: 'line',
              stack: '总量',
              smooth: true,
              showSymbol: !1,
              data: [220, 182, 191, 234, 290, 330, 310]
          }
      ]
  };
  var myChart6 = echarts.init(document.getElementById('chartmain6'));
  var option2 = {
      title: {
          text: "积温",
          x: "center",
          textStyle: {
              fontSize: 14
          },
          top: 0
      },
      toolbox: {
          show: !0,
          right: 10,
          feature: {
              saveAsImage: {
                  type: "png",
                  pixelRatio: 2
              }
          }
      },
      grid: {
          /* top: 60,
           left: 10,
           right: 10,
           height: 200,
           containLabel: !0*/
      },
      xAxis: {
          type: "category",
          boundaryGap: false,
          data: ['地块1','地块2','地块3','地块4','地块5','地块6','地块7','地块8','地块9','地块10','地块11','地块12',]},
      yAxis: {
          type: "value",
          scale: !0,
          splitArea: {//背景条纹
              show: true,
              areaStyle: {
                  color: [
                      'rgba(255,255,255,0)',
                      'rgba(242,243,248,1)'
                  ]
              }
          }
      },
      visualMap:{
          show: !1,
          pieces: [{
              gt: 0,
              lte: 50,
              color: "#2f4554"
          }, {
              gt: 50,
              lte: 100,
              color: "#c23531"
          }]
      }
      ,
      series: [{
          data:[50,52,63,43,75,12,57,89,79,67,45,94,23,76,89,120,125,156,34] ,
          showSymbol: !1,
          name: "积温",
          type: "line",
          smooth: true
      }
      ],
      tooltip: {
          trigger: "axis",
          formatter: function(e) {
              return e[0].name + "<br>多空比:" + e[0].value.toFixed(1)
          }
      }
  };
  var myChart2 = echarts.init(document.getElementById('chartmain3'));
  var option3 =  {
      title: {
          text: "叶龄",
          x: "center",
          textStyle: {
              fontSize: 14
          },
          top: 0
      },
      toolbox: {
          show: !0,
          right: 10,
          feature: {
              saveAsImage: {
                  type: "png",
                  pixelRatio: 2
              }
          }
      },
      grid: {
          /* top: 60,
           left: 10,
           right: 10,
           height: 200,
           containLabel: !0*/
      },
      xAxis: {
          type: "category",
          boundaryGap: false,
          data: ['地块1','地块2','地块3','地块4','地块5','地块6','地块7','地块8','地块9','地块10','地块11','地块12',]},
      yAxis: {
          type: "value",
          scale: !0,
          splitArea: {//背景条纹
              show: true,
              areaStyle: {
                  color: [
                      'rgba(255,255,255,0)',
                      'rgba(242,243,248,1)'
                  ]
              }
          }
      },
      visualMap:{
          show: !1,
          pieces: [{
              gt: 0,
              lte: 50,
              color: "#2f4554"
          }, {
              gt: 50,
              lte: 100,
              color: "#c23531"
          }]
      }
      ,
      series: [{
          data:[50,52,63,43,75,12,57,89,79,67,45,94,23,76,89,120,125,156,34] ,
          showSymbol: !1,
          name: "叶龄",
          type: "line",
          smooth: true
      }
      ],
      tooltip: {
          trigger: "axis",
          formatter: function(e) {
              return e[0].name + "<br>多空比:" + e[0].value.toFixed(1)
          }
      }
  };
  var myChart3 = echarts.init(document.getElementById('chartmain4'));
  myChart.setOption(option);
  myChart2.setOption(option2);
  myChart3.setOption(option3);
  myChart6.setOption(option6);

  layui.use('element', function () {   //tab切换
      var element = layui.element;

      //监听Tab切换
      element.on('tab(tab1)', function(){
          myChart.resize();
          myChart2.resize();
          myChart3.resize();
          myChart6.resize();
      });

  }) //选项卡




  /*光照度*/
  var myChart7 = echarts.init(document.getElementById('boxEcharts1')),
      option7 =  {
          title: {
              x: "center",
              textStyle: {
                  fontSize: 14
              },
              top: 0
          },
          toolbox: {
              show: !0,
              right: 10,
              feature: {
                  saveAsImage: {
                      type: "png",
                      pixelRatio: 2
                  }
              }
          },
          tooltip: {
              formatter: "{a} <br/>{c}%"
          },
          series: [{
              min: 0,
              max: 100,
              name: "光照度",
              type: "gauge",
              center: ["50%", "60%"],
              radius: "85%",
              detail: {
                  formatter: "{value}klux",
                  fontSize: 18
              },
              axisTick: {            // 坐标轴小标记
                  length: 18,        // 属性length控制线长
                  lineStyle: {       // 属性lineStyle控制线条样式
                      color: 'auto'
                  }
              },
              data: [{
                  value: 45         //值
              }],
              axisLine: {
                  lineStyle: {
                      width: 12,
                      shadowBlur: 0,
                      color: [[.5, "#2f4554"], [.5, "#61a0a8"], [1, "#c23531"]]
                  }
              }
          }]
      }
  myChart7.setOption(option7);
  /*空气湿度*/
  var myChart8 = echarts.init(document.getElementById('boxEcharts2')),
      option8 =  {
          title: {
              x: "center",
              textStyle: {
                  fontSize: 14
              },
              top: 0
          },
          toolbox: {
              show: !0,
              right: 10,
              feature: {
                  saveAsImage: {
                      type: "png",
                      pixelRatio: 2
                  }
              }
          },
          tooltip: {
              formatter: "{a} <br/>{c}%"
          },
          series: [{
              min: 0,
              max: 100,
              name: "空气湿度",
              type: "gauge",
              center: ["50%", "60%"],
              radius: "85%",
              detail: {
                  formatter: "{value}%",
                  fontSize: 18
              },
              data: [{
                  value: 45         //值
              }],
              axisTick: {            // 坐标轴小标记
                  length: 18,        // 属性length控制线长
                  lineStyle: {       // 属性lineStyle控制线条样式
                      color: 'auto'
                  }
              },
              axisLine: {
                  lineStyle: {
                      width: 12,
                      shadowBlur: 0,
                      color: [[.5, "#2f4554"], [.5, "#61a0a8"], [1, "#c23531"]]
                  }
              }
          }]
      }
  myChart8.setOption(option8);
  /*空气温度开始*/
  var myChart9 = echarts.init(document.getElementById('boxEcharts3'));
  option9 =  {
      backgroundColor: '#ffffff',
      title: {
          show: false
      },
      series: [{
          name: '',
          type: "gauge",
          detail: {
              formatter: '{value}℃',
              fontSize: 15,
              offsetCenter: [0, "50%"],
              y: 200
          },
          startAngle: 180,
          endAngle: 0,
          min: 0,
          max: 100,
          radius: "80%",
          //splitNumber: 3,
          center: ["50%", "65%"],
          axisLine: {
              show: true,
              lineStyle: {
                  width: 14,
                  shadowBlur: 0,
                  color: [
                      [0.5, '#91c7a1'],
                      [0.75, '#63869e'],
                      [1, '#C23531']
                  ]
              }
          },

          //修改指标
          itemStyle: {
              normal: {
                  //color: "rgba(255, 255, 255, 0.8)",
                  shadowBlur: 10
              }
          },
          data: [{
              value: 28,
              name: ''
          }]
      }]
  }
  myChart9.setOption(option9);
  /*空气温度结束*/

  /*土壤湿度*/
  var myChart10 = echarts.init(document.getElementById('boxEcharts4'));
  option10 = {
      title: {
          x: "center",
          textStyle: {
              fontSize: 14
          },
          top: 0
      },
      toolbox: {
          show: !0,
          right: 10,
          feature: {
              saveAsImage: {
                  type: "png",
                  pixelRatio: 2
              }
          }
      },
      tooltip: {
          formatter: "{a} <br/>{c}%"
      },
      series: [{
          min: 0,
          max: 100,
          name: "空气湿度",
          type: "gauge",
          center: ["50%", "60%"],
          radius: "85%",
          detail: {
              formatter: "{value}%",
              fontSize: 18
          },
          data: [{
              value: 45         //值
          }],
          axisTick: {            // 坐标轴小标记
              length: 18,        // 属性length控制线长
              lineStyle: {       // 属性lineStyle控制线条样式
                  color: 'auto'
              }
          },
          axisLine: {
              lineStyle: {
                  width: 12,
                  shadowBlur: 0,
                  color: [[.5, "#2f4554"], [.5, "#61a0a8"], [1, "#c23531"]]
              }
          }
      }]
  }
  myChart10.setOption(option10);
  /*土壤温度*/
  var myChart11 = echarts.init(document.getElementById('boxEcharts5'));
  option11 = {
      backgroundColor: '#ffffff',
      title: {
          show: false
      },
      series: [{
          name: '',
          type: "gauge",
          detail: {
              formatter: '{value}℃',
              fontSize: 15,
              offsetCenter: [0, "50%"],
              y: 200
          },
          startAngle: 180,
          endAngle: 0,
          min: 0,
          max: 100,
          radius: "80%",
          //splitNumber: 3,
          center: ["50%", "65%"],
          axisLine: {
              show: true,
              lineStyle: {
                  width: 14,
                  shadowBlur: 0,
                  color: [
                      [0.5, '#91c7a1'],
                      [0.75, '#63869e'],
                      [1, '#C23531']
                  ]
              }
          },

          //修改指标
          itemStyle: {
              normal: {
                  //color: "rgba(255, 255, 255, 0.8)",
                  shadowBlur: 10
              }
          },
          data: [{
              value: 28,
              name: ''
          }]
      }]
  }
  myChart11.setOption(option11);
  /*二氧化碳浓度echarts开始*/
  var myChart12 = echarts.init(document.getElementById('boxEcharts6'));
  var bgImg =
      '';

  var fillImg =
      '';
  var chartData = [{
      name: '二氧化碳',
      value: 30
  }];
  var bgData = [];
  var itemData = [];

  // 取出每一条数据value,作为显示数据
  chartData.forEach(function (items, index) {
      itemData.push(items.value);
  })

  // 取出所有数据最大值,作为背景象形柱图数据
  chartData.forEach(function (items, index) {
      bgData.push({
          name: items.name,
          value: Math.max.apply(null, [100])
      });
  })
  // 所有数据最大值
  var maxValue = 100;
  // 字体 distance放大参数
  var scale = 1;
  //富文本配置
  var rich = {
      white: {
          color: "#fff",
          align: 'left',
          fontSize: 18 * scale,
          padding: [0, 0]
      },
  };
  var option12 = {
      tooltip: {
          formatter: '{b} : {c}',
      },
      grid: {
          left: '3%',
          right: '6%',
          bottom: '3%',
          containLabel: true
      },
      xAxis: [{
          type: 'category',
          data: (function (data) {
              var arr = [];
              data.forEach(function (items) {
                  arr.push(items.name);
              });
              return arr;
          })(chartData),



          boundaryGap: ['20%', '20%'],
          splitLine: {
              show: false
          },
          axisLine: {
              show: false
          },
          axisTick: {
              show: false
          },
          axisLabel: {
              textStyle: {
                  fontSize: 16 * scale,
                  color: '#3fdaff'
              }
          }
      }],
      yAxis: [{
          type: 'value',
          splitLine: {
              show: false
          },
          axisLine: {
              show: false
          },
          axisTick: {
              show: true,
              inside: true,
              length: 10 * scale,
              lineStyle: {
                  color: '#0b5263'
              }
          },
          axisLabel: {
              textStyle: {
                  color: '#0b5263',
                  fontSize: 14 * scale
              }
          },
      }],
      series: [
          //背景
          {
              name: 'bg',
              type: 'pictorialBar',
              barWidth: '45%',
              // barGap: '0%',
              silent: true,
              label: {
                  normal: {
                      show: true,
                      position: "top",
                      distance: 20 * scale,
                      formatter: function (params) {
                          var stuNum = 0;
                          chartData.forEach(function (value, index, array) {
                              if (params.name == value.name) {
                                  stuNum = value.value;
                              }
                          })
                          return stuNum + 'm/s';
                      },
                      textStyle: {
                          color: "#ffc72b",
                          fontSize: 20 * scale
                      },
                      rich: rich
                  }
              },
              symbol: 'image://' + bgImg,
              symbolClip: false,
              symbolBoundingData: maxValue,
              symbolSize: [52, '100%'],
              data: bgData
          },
          {
              name: '数据',
              type: 'pictorialBar',
              barWidth: '45%',
              barGap: '-100%',
              data: chartData,
              z: 3,
              symbol: 'image://' + fillImg,
              symbolClip: true,
              symbolBoundingData: maxValue,
              symbolSize: [52, '100%']
          },
      ]
  };
  myChart12.setOption(option12);
  /*二氧化碳浓度echarts结束*/

</script>
<script src="../js/index.js"></script>